
class Sticky {
    constructor(domEl) {
        
        // 初始化值
        this.wrapper = domEl;
        this.offsetTop = this.getPoint(domEl).top;
        this.offsetHeight = domEl.offsetHeight;
        this.isFixed = false;

        // 所有className默认值
        this.occupiedElClassName = 'J_occupied-el';
        this.fixedClassName = 'xu-dom-fixed';
        this.stickyClassName = 'xu-dom-sticky';
        this.domBottomLineClassName = 'xu-border-line';

        this.isSupportSticky = (() => {
            if (window.CSS && (window.CSS.supports('position', 'sticky') || window.CSS.supports('position', '-webkit-sticky'))) {
                return true;
            } else {
                return false;
            }
        })();

        this.domHandler = {
            addClass(dom, className) {
                const domClassNames = dom.className;
                if (domClassNames.indexOf(className) === -1) {
                    dom.className += ' ' + className;
                }
            },
            removeClass(dom, className) {
                dom.className = dom.className.replace(className, '');
            },
            hasClass(dom, className) {
                return dom.className.indexOf(className) > -1;
            },
            attr(dom, key, val) {
                dom.setAttribute(key, val);
            }
        }

        if (this.isSupportSticky) {
            domEl.className += ' ' + this.stickyClassName;
        }
        this.initStyle();
        this.insertOccupiedEl();
        this.scrollEvent();
    }
    checkValid(domEl) {
        try{
            if (domEl.nodeType !== 1) {
                alert('请传入正确的dom节点');
                return false;
            }
        } catch(e) {
            alert('请传入正确的dom节点');
            return false;
        }
    }
    getPoint(obj) {
        var t = obj.offsetTop; 
        var l = obj.offsetLeft; 
        while (obj = obj.offsetParent) {
            t += obj.offsetTop;
            l += obj.offsetLeft;
        }  
        return {
            top: t,
            left: l
        }
    }
    insertOccupiedEl() {
        const divEl = document.createElement('div');
        divEl.className = this.occupiedElClassName;
        divEl.style.height = this.offsetHeight + 'px';
        divEl.style.display = 'none';
        this.occupiedEl = divEl;
        document.body.insertBefore(divEl, document.body.children[0]);
    }
    scrollEvent() {
        const wrapper = this.wrapper;
        const domHandler = this.domHandler;
        window.addEventListener('scroll', (e) => {

            this.isFixed = (document.documentElement.scrollTop || document.body.scrollTop) > this.offsetTop;

            if (this.isFixed) {
                domHandler.addClass(wrapper, this.domBottomLineClassName);
            } else {
                domHandler.removeClass(wrapper, this.domBottomLineClassName);
            }

            if (!this.isSupportSticky) {
                this.setFixedPosition();
            }

        })
    }
    setFixedPosition() {
        const {wrapper, occupiedEl, isFixed, domHandler} = this;

        if (isFixed) {
            domHandler.addClass(wrapper, this.fixedClassName);
            occupiedEl.style.display = 'block';
        } else {
            domHandler.removeClass(wrapper, this.fixedClassName);
            occupiedEl.style.display = 'none';
        }
    }
    initStyle() {
        const headEl = document.head;
        const styleEl = document.createElement('style');

        styleEl.innerHTML = `
            .${this.fixedClassName} {
                position: fixed;
                top: 0;
                z-index: 99;
                margin-top: 0 !important;
            }
            .${this.stickyClassName} {
                position: sticky;
                position: -webkit-sticky;
                top: 0;
                z-index: 99;
            }
            .${this.domBottomLineClassName} {
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            }
        `;

        headEl.appendChild(styleEl);
    }
}